<template>
  <div class="archive-info-page">
    <!-- 页面头部导航 -->
    <div class="page-header">
      <div class="header-content">
        <a-breadcrumb class="page-breadcrumb">
          <a-breadcrumb-item>
            <router-link to="/archives">
              <FolderOutlined />
              生灵档案管理
            </router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <UserOutlined />
            {{ archive?.name || '档案详情' }}
          </a-breadcrumb-item>
          <a-breadcrumb-item>档案信息</a-breadcrumb-item>
        </a-breadcrumb>

        <div class="header-actions">
          <a-button @click="$router.push('/archives')" class="back-btn">
            <ArrowLeftOutlined />
            返回
          </a-button>

          <a-dropdown>
            <a-button type="primary">
              切换页面
              <DownOutlined />
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item key="basic" @click="$router.push(`/archives/${archiveId}/basic`)">
                  <UserOutlined />
                  个人基础信息
                </a-menu-item>
                <a-menu-item key="life" @click="$router.push(`/archives/${archiveId}/life-history`)">
                  <ClockCircleOutlined />
                  生命历程管理
                </a-menu-item>
                <a-menu-item key="social" @click="$router.push(`/archives/${archiveId}/social-network`)">
                  <TeamOutlined />
                  社会关系网络
                </a-menu-item>
                <a-menu-item key="archive" disabled>
                  <FolderOutlined />
                  档案信息
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="page-content">
      <a-row :gutter="[32, 32]">
        <!-- 左侧：档案状态概览 -->
        <a-col :xs="24" :lg="8">
          <a-card title="档案状态" :bordered="false" class="overview-card">
            <div class="archive-overview">
              <div class="avatar-section">
                <a-avatar :src="archive?.avatar" :size="120">
                  {{ archive?.name?.charAt(0) }}
                </a-avatar>
                <h2 class="archive-name">{{ archive?.name }}</h2>
                <a-tag :color="archive?.status === 'alive' ? 'green' : 'red'" size="large">
                  {{ archive?.status === 'alive' ? '在世' : '已故' }}
                </a-tag>
              </div>

              <!-- 档案状态统计 -->
              <div class="archive-stats">
                <div class="stat-item">
                  <span class="label">档案编号：</span>
                  <span class="value">{{ archive?.id }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">创建时间：</span>
                  <span class="value">{{ getCreateTime() }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">最后更新：</span>
                  <span class="value">{{ getUpdateTime() }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">档案状态：</span>
                  <a-tag :color="getArchiveStatusColor()" size="small">
                    {{ getArchiveStatusText() }}
                  </a-tag>
                </div>
                <div class="stat-item">
                  <span class="label">完整度：</span>
                  <div class="completeness-progress">
                    <a-progress :percent="getCompletenessPercent()" :stroke-color="getCompletenessColor()" size="small" />
                    <span class="progress-text">{{ getCompletenessPercent() }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </a-card>

          <!-- 快速操作 -->
          <a-card title="快速操作" :bordered="false" class="quick-actions-card">
            <div class="quick-actions">
              <a-button block @click="exportArchive" class="action-btn">
                <DownloadOutlined />
                导出档案
              </a-button>
              <a-button block @click="backupArchive" class="action-btn">
                <CopyOutlined />
                备份档案
              </a-button>
              <a-button block @click="printArchive" class="action-btn">
                <PrinterOutlined />
                打印档案
              </a-button>
              <a-button block @click="shareArchive" class="action-btn">
                <ShareAltOutlined />
                分享档案
              </a-button>
            </div>
          </a-card>
        </a-col>

        <!-- 右侧：详细档案信息 -->
        <a-col :xs="24" :lg="16">
          <div v-if="archive" class="archive-info-container">
            <!-- 档案基本信息 -->
            <a-card title="档案基本信息" :bordered="false" class="info-card">
              <a-descriptions :column="2" bordered>
                <a-descriptions-item label="档案号">{{ archive.id }}</a-descriptions-item>
                <a-descriptions-item label="姓名">{{ archive.name }}</a-descriptions-item>
                <a-descriptions-item label="性别">{{ archive.gender === 'male' ? '男' : '女' }}</a-descriptions-item>
                <a-descriptions-item label="年龄">{{ archive.age }}岁</a-descriptions-item>
                <a-descriptions-item label="状态">
                  <a-tag :color="archive.status === 'alive' ? 'green' : 'red'">
                    {{ archive.status === 'alive' ? '在世' : '已故' }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="业力值">
                  <span :style="{ color: getKarmaColor(archive.karma) }">{{ archive.karma }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="预定寿命">{{ archive.lifespan }}岁</a-descriptions-item>
                <a-descriptions-item label="居住地">{{ archive.location || '未知' }}</a-descriptions-item>
              </a-descriptions>
            </a-card>

            <!-- 系统信息 -->
            <a-card title="系统信息" :bordered="false" class="info-card">
              <a-descriptions :column="2" bordered>
                <a-descriptions-item label="数据版本">{{ getDataVersion() }}</a-descriptions-item>
                <a-descriptions-item label="存储位置">{{ getStorageLocation() }}</a-descriptions-item>
                <a-descriptions-item label="访问权限">{{ getAccessPermission() }}</a-descriptions-item>
                <a-descriptions-item label="备份状态">
                  <a-tag color="green">已备份</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="同步状态">
                  <a-tag color="blue">已同步</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="安全级别">
                  <a-tag color="orange">高级</a-tag>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>

            <!-- 操作日志 -->
            <a-card title="操作日志" :bordered="false" class="info-card">
              <a-table :columns="logColumns" :data-source="getOperationLogs()" :pagination="{ pageSize: 5 }" size="small">
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'type'">
                    <a-tag :color="getLogTypeColor(record.type)">
                      {{ record.type }}
                    </a-tag>
                  </template>
                  <template v-else-if="column.key === 'operator'">
                    <a-avatar :size="24" style="margin-right: 8px">
                      {{ record.operator.charAt(0) }}
                    </a-avatar>
                    {{ record.operator }}
                  </template>
                </template>
              </a-table>
            </a-card>

            <!-- 相关文件 -->
            <a-card title="相关文件" :bordered="false" class="info-card">
              <div class="file-list">
                <div v-for="file in getRelatedFiles()" :key="file.id" class="file-item">
                  <div class="file-icon">
                    <component :is="getFileIcon(file.type)" />
                  </div>
                  <div class="file-info">
                    <div class="file-name">{{ file.name }}</div>
                    <div class="file-meta">
                      <span class="file-size">{{ file.size }}</span>
                      <span class="file-time">{{ file.time }}</span>
                    </div>
                  </div>
                  <div class="file-actions">
                    <a-button type="link" size="small" @click="downloadFile(file)">
                      <DownloadOutlined />
                      下载
                    </a-button>
                    <a-button type="link" size="small" @click="viewFile(file)">
                      <EyeOutlined />
                      查看
                    </a-button>
                  </div>
                </div>
              </div>
            </a-card>
          </div>

          <div v-else class="loading-container">
            <a-spin size="large">
              <div class="loading-text">正在加载档案信息...</div>
            </a-spin>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  FolderOutlined,
  UserOutlined,
  ArrowLeftOutlined,
  DownOutlined,
  ClockCircleOutlined,
  TeamOutlined,
  DownloadOutlined,
  CopyOutlined,
  PrinterOutlined,
  ShareAltOutlined,
  EyeOutlined,
  FileTextOutlined,
  FilePdfOutlined,
  FileImageOutlined,
  FileOutlined
} from '@ant-design/icons-vue'
import { useArchivesStore } from '@/stores'

// 路由和状态管理
const route = useRoute()
const router = useRouter()
const archivesStore = useArchivesStore()

// 响应式数据
const loading = ref(false)

// 计算属性
const archiveId = computed(() => Number(route.params.id))
const archive = computed(() => archivesStore.getArchiveById(archiveId.value))

// 表格列配置
const logColumns = [
  {
    title: '操作时间',
    dataIndex: 'time',
    key: 'time',
    width: 120
  },
  {
    title: '操作类型',
    key: 'type',
    width: 100
  },
  {
    title: '操作人员',
    key: 'operator',
    width: 120
  },
  {
    title: '操作描述',
    dataIndex: 'description',
    key: 'description'
  }
]

// 方法
const getKarmaColor = (karma) => {
  if (karma >= 80) return '#52c41a'
  if (karma >= 40) return '#1890ff'
  if (karma >= 0) return '#faad14'
  if (karma >= -40) return '#fa541c'
  return '#f5222d'
}

const getCreateTime = () => {
  return '2023-01-15 14:30:25'
}

const getUpdateTime = () => {
  return '2023-12-10 09:15:42'
}

const getArchiveStatusColor = () => {
  return 'green'
}

const getArchiveStatusText = () => {
  return '正常'
}

const getCompletenessPercent = () => {
  if (!archive.value) return 0

  let completedFields = 0
  let totalFields = 10

  if (archive.value.name) completedFields++
  if (archive.value.age) completedFields++
  if (archive.value.gender) completedFields++
  if (archive.value.basicInfo?.profession) completedFields++
  if (archive.value.basicInfo?.birthPlace) completedFields++
  if (archive.value.location) completedFields++
  if (archive.value.lifeHistory?.birthDate) completedFields++
  if (archive.value.socialNetwork?.family) completedFields++
  if (archive.value.karma !== undefined) completedFields++
  if (archive.value.status) completedFields++

  return Math.round((completedFields / totalFields) * 100)
}

const getCompletenessColor = () => {
  const percent = getCompletenessPercent()
  if (percent >= 80) return '#52c41a'
  if (percent >= 60) return '#faad14'
  return '#fa541c'
}

const getDataVersion = () => {
  return 'v2.1.0'
}

const getStorageLocation = () => {
  return '地府中央数据库'
}

const getAccessPermission = () => {
  return '高级权限'
}

const getOperationLogs = () => {
  return [
    {
      id: 1,
      time: '2023-12-10 09:15',
      type: '更新',
      operator: '孟婆',
      description: '更新基础信息'
    },
    {
      id: 2,
      time: '2023-12-05 14:20',
      type: '查看',
      operator: '判官',
      description: '查看档案详情'
    },
    {
      id: 3,
      time: '2023-11-28 16:45',
      type: '创建',
      operator: '文书司',
      description: '创建生命事件记录'
    },
    {
      id: 4,
      time: '2023-11-15 11:30',
      type: '备份',
      operator: '系统',
      description: '自动备份档案数据'
    },
    {
      id: 5,
      time: '2023-10-20 08:15',
      type: '同步',
      operator: '系统',
      description: '与阳间数据同步'
    }
  ]
}

const getLogTypeColor = (type) => {
  const colors = {
    更新: 'blue',
    查看: 'green',
    创建: 'purple',
    备份: 'orange',
    同步: 'cyan',
    删除: 'red'
  }
  return colors[type] || 'default'
}

const getRelatedFiles = () => {
  return [
    {
      id: 1,
      name: '生死簿原始记录.pdf',
      type: 'pdf',
      size: '2.3MB',
      time: '2023-12-01'
    },
    {
      id: 2,
      name: '业力变化图表.png',
      type: 'image',
      size: '512KB',
      time: '2023-11-28'
    },
    {
      id: 3,
      name: '家族关系图.txt',
      type: 'text',
      size: '48KB',
      time: '2023-11-15'
    },
    {
      id: 4,
      name: '审判记录.doc',
      type: 'doc',
      size: '1.8MB',
      time: '2023-10-30'
    }
  ]
}

const getFileIcon = (type) => {
  const icons = {
    pdf: FilePdfOutlined,
    image: FileImageOutlined,
    text: FileTextOutlined,
    doc: FileOutlined
  }
  return icons[type] || FileOutlined
}

const loadArchive = async () => {
  try {
    loading.value = true

    // 确保档案数据已加载
    if (!archivesStore.archives.length) {
      await archivesStore.fetchArchives()
    }

    // 检查档案是否存在
    if (!archive.value) {
      message.error('档案不存在')
      router.push('/archives')
    }
  } catch (error) {
    message.error('加载档案失败：' + error.message)
    router.push('/archives')
  } finally {
    loading.value = false
  }
}

// 操作方法
const exportArchive = () => {
  message.info('档案导出功能开发中...')
}

const backupArchive = () => {
  message.info('档案备份功能开发中...')
}

const printArchive = () => {
  message.info('档案打印功能开发中...')
}

const shareArchive = () => {
  message.info('档案分享功能开发中...')
}

const downloadFile = (file) => {
  message.info(`下载文件：${file.name}`)
}

const viewFile = (file) => {
  message.info(`查看文件：${file.name}`)
}

// 监听路由参数变化
watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      loadArchive()
    }
  }
)

// 生命周期
onMounted(() => {
  loadArchive()
})
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.archive-info-page {
  min-height: 100vh;
  background: $dark-bg;

  .page-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 24px 32px;
    backdrop-filter: blur(10px);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .page-breadcrumb {
        :deep(.ant-breadcrumb-link) {
          color: $text-secondary;

          &:hover {
            color: $primary-color;
          }

          a {
            color: $text-secondary;
            text-decoration: none;

            &:hover {
              color: $primary-color;
            }
          }
        }

        :deep(.ant-breadcrumb-separator) {
          color: $text-tertiary;
        }
      }

      .header-actions {
        display: flex;
        gap: 16px;

        .back-btn {
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: $text-primary;

          &:hover {
            background: rgba(114, 46, 209, 0.1);
            border-color: $primary-color;
            color: $primary-color;
          }
        }

        .ant-btn-primary {
          background: $primary-color;
          border-color: $primary-color;

          &:hover {
            background: $primary-color-light;
            border-color: $primary-color-light;
          }
        }
      }
    }
  }

  .page-content {
    padding: 32px;
  }

  .overview-card,
  .quick-actions-card,
  .info-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    margin-bottom: 24px;

    :deep(.ant-card-head) {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-card-head-title {
        color: $text-primary;
        font-weight: 600;
      }
    }

    :deep(.ant-card-body) {
      background: transparent;
      padding: 24px;
    }
  }

  .archive-overview {
    .avatar-section {
      text-align: center;
      margin-bottom: 24px;

      .archive-name {
        margin: 16px 0 8px 0;
        color: $text-primary;
        font-size: 24px;
        font-weight: 600;
      }
    }

    .archive-stats {
      .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .label {
          color: $text-secondary;
          font-size: 14px;
        }

        .value {
          color: $text-primary;
          font-weight: 500;
        }

        .completeness-progress {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
          margin-left: 12px;

          .progress-text {
            font-size: 12px;
            color: $text-primary;
            min-width: 35px;
          }
        }
      }
    }
  }

  .quick-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .action-btn {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: $text-primary;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      &:hover {
        background: rgba(114, 46, 209, 0.1);
        border-color: $primary-color;
        color: $primary-color;
      }
    }
  }

  .archive-info-container {
    .info-card {
      :deep(.ant-descriptions) {
        .ant-descriptions-item-label {
          background: rgba(255, 255, 255, 0.05);
          color: $text-secondary;
        }

        .ant-descriptions-item-content {
          background: rgba(255, 255, 255, 0.02);
          color: $text-primary;
        }

        &.ant-descriptions-bordered {
          .ant-descriptions-item-label,
          .ant-descriptions-item-content {
            border-color: rgba(255, 255, 255, 0.15);
          }
        }
      }

      :deep(.ant-table) {
        background: transparent;

        .ant-table-thead > tr > th {
          background: rgba(255, 255, 255, 0.08);
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
          color: $text-primary;
        }

        .ant-table-tbody > tr > td {
          background: transparent;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          color: $text-primary;
        }

        .ant-table-tbody > tr:hover > td {
          background: rgba(114, 46, 209, 0.05);
        }
      }
    }

    .file-list {
      .file-item {
        display: flex;
        align-items: center;
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        margin-bottom: 12px;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.05);
          border-color: $primary-color;
        }

        &:last-child {
          margin-bottom: 0;
        }

        .file-icon {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          background: rgba(114, 46, 209, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          color: $primary-color;
          font-size: 18px;
        }

        .file-info {
          flex: 1;

          .file-name {
            font-size: 14px;
            font-weight: 500;
            color: $text-primary;
            margin-bottom: 4px;
          }

          .file-meta {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: $text-secondary;
          }
        }

        .file-actions {
          display: flex;
          gap: 8px;

          .ant-btn-link {
            color: $primary-color;
            padding: 4px 8px;

            &:hover {
              color: $primary-color-lighter;
            }
          }
        }
      }
    }
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(10px);

    .loading-text {
      margin-top: 16px;
      color: $text-secondary;
      font-size: 16px;
    }
  }

  // 下拉菜单样式
  :deep(.ant-dropdown) {
    .ant-dropdown-menu {
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);

      .ant-dropdown-menu-item {
        color: $text-primary;

        &:hover {
          background: rgba(114, 46, 209, 0.1);
          color: $primary-color;
        }

        &.ant-dropdown-menu-item-disabled {
          color: $text-tertiary;
          background: rgba(114, 46, 209, 0.05);
        }
      }
    }
  }
}

// 响应式样式
@media (max-width: 768px) {
  .archive-info-page {
    .page-header {
      padding: 16px 20px;

      .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;

        .header-actions {
          width: 100%;
          justify-content: space-between;
        }
      }
    }

    .page-content {
      padding: 20px;
    }

    .file-list {
      .file-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;

        .file-icon {
          margin-right: 0;
        }

        .file-actions {
          width: 100%;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
